<template>
  <div ref="chartRef" class="barChart"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref, defineExpose } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { datacollectionrate } from '/@/api/requestApi/boardApi';
  defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  async function getdatacollectionrate() {
    return new Promise((resolve) => {
      datacollectionrate()
        .then((res) => {
          //let todaymoney = 58.1;
          let todaymoney = res.today;
          let legendData = '当日采集率' + todaymoney + '%';
          let symoney = 100 - parseFloat(todaymoney);
          setOptions({
            legend: {
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              top: '0',
              left: '18%',
              data: [legendData],
              textStyle: {
                color: '#fff',
              },
            },
            // //点击提示文字
            tooltip: {
              show: false,
            },
            //环形颜色
            color: ['#306CA6'],
            // 设置环形中间的数据
            series: [
              {
                name: legendData,
                type: 'pie',
                radius: ['70%', '80%'], //两个表示环：内半径,外半径
                center: ['50%', '55%'], //左右，上下
                avoidLabelOverlap: false,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  borderRadius: '50%',
                },
                color: ['#0663FF', 'rgba(54,70,106, 0.57)'],
                //牵引线条颜色
                //data: [res.today?res.today:0, 100],
                data: [todaymoney, symoney],
              },
            ],
          });
          resolve(true);
        })
        .catch(() => {
          resolve(false);
        });
    });
  }
  defineExpose({ getdatacollectionrate });
  onMounted(() => {
    getdatacollectionrate();
  });
</script>

<style lang="less" scoped>
  .barChart {
    width: 100%;
    height: 100%;
  }
</style>
